#header {
  with: 98%;
  min-height: 196px;
  top: 65px;
  position: relative;
  background-color: white;
  border-radius: 15px 15px 0px 0px;
}

#logo {
  width: 188px;
  height: 150px;
  background: url("../img/Bookshop_logo.png");
  margin: auto;
}

#search {
  top: -65px;
  position: absolute;
  display: block;
  z-index: 10;
  right: 0px;
  width: 435px;
  height: 35px;
  padding: 5px 6px 6px 7px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  overflow: hidden;
  .round;
}

#search ul {
  list-style-type: none;
  float: left;
  padding: 0px;
  width: 100%;
  margin: 0px;  
}

#search ul li {
  display: inline;  
}

#login {
  position: relative;
  float: right;
  width: 155px;
  top: 8px;
  display: block;
  color: rgb(8, 26, 223);
  font-size: 13px;
  text-align: center;
}

#login a:hover {
  .hoverSign;
}

#btnRegister {
  border-radius: 5px 0 0 5px;
}

#btnLogin {
  border-radius: 0 5px 5px 0;
  margin-left: -3px;
}

.hoverSign {
  text-shadow: 1px 1px #000033;
  background-image: none;
}

.signIn {
  color: #fff;
  background: #47A9EB;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  background-image: -webkit-linear-gradient(top, transparent, rgba(14, 74, 113, .2));
  cursor: pointer;  
  padding: 6px;
  font-size: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0px 2px 4px 0 rgba(0,0,0,.35);
}

#profile {
  width: 100px;
  height: 32px;
  position: relative;
  padding: 0;
  float: right;
  border-radius: 5px;
  padding-left: 2px;
  right: 5px;
}

#profile:hover {
  .hoverSign;
}

#icon-avatar {
  width: 28px;
  height: 28px;
  //background: url("../img/avatar.png");
  margin-top: 2px;
  border-radius: 5px; 
}

.profile {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  font-size: 16px;
  position: relative;
  top: 2px;
}

.arrowDown {
  width: 10px;
  height: 10px;
  position: relative;
  clip: rect(5px auto auto auto);
  left: 2px;
  top: 2px;
  background-color: #fff;
  display: inline-table;
  -webkit-transform: rotate(-45deg);
}
#searchBar {
  width: 170px;
  position: relative;
  top: 2px;
  padding: 8px 5px 8px 30px;
  border: 1px solid #ccc;
  background: white url("../img/searchIcon.png") left center no-repeat;
  .round;
}


#btnSearch {
  width: 64px;
  height: 28px;
  position: absolute;
  float: right;
  margin-left: 5px;
  padding: 3px 5px 2px;
  border: none;
  top: 8px;
  background: url("../img/searchButton.png") 0 0 no-repeat;
  .round;
}

#cart {
  left: 82%;
  top: 118px;
  width: 12%;
  min-height: 70px;
  position: absolute;
  background: url("../img/cart.png");
  background-size: 100% 100%;
}

#cart-content {
  position: relative;
  top: 30px;
  text-align: center;
  margin: auto;
  padding-left: 15px;
  line-height: 22px;
  .fontStyle1(white);  
}

#header-line {  
  top: 191px; 
}

.line {
  left: 40px;
  width: @divWidth;
  min-height: 5px;
  position: absolute;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.498039);
  border-top: @border;
  height: 0px;
}

#menu {
  zoom: 1;
  opacity: 1;
  top: 148px;
  width: 490px;
  min-height: 20px;
  position: absolute;
}

#menu-content {
  text-align: center;
  height: 20px;
  width: 760px;
  overflow: visible;
  white-space: nowrap;
  display: inherit;
  list-style-type: none;
  
}

#menu-content li {
  float: left;  
  width: 14%;
  cursor: pointer;
  .fontStyle1(@color2);
  transition: color 0.4s ease 0s;
  -webkit-transition-property: color;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0s;
}

ul.menu-content li span{
  display:block;
  color: rgb(158, 62, 47);
  text-decoration:none;
  padding:2px;
  //margin-left:10px;
  //margin-right:-10px;
  border-right: 1px solid rgb(204, 204, 204);
  //border: 1px solid rgb(204, 204, 204);
  //border-radius: 5px 5px 0px 0px;
}

ul.menu-content li span:hover{
  //color:#FFF;  
  background:#F0C684;
  opacity: 0.8;
}

ul.menu-content li.active span{
  color:#FFF;
  background:#73C5DE;
}


#panel {
  width: 285px;
  height: 290px;
  .panel;
}

.panel {
  right: 10px;
  position: absolute;
  top: -28px;
  z-index: 11;
  border-radius: 5px 0 5px 5px;
  background: #f6f6f6;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0px 2px 4px 0 rgba(0,0,0,.35);    
}

#signIn {
  position: relative;
  margin-left: 18px;
  margin-top: 10px;
}

.label {
  margin-top: 10px;
  color: #5b636a;
  font: normal normal normal 16px/1.6 'Open Sans', sans-serif;
}

.inputPopup {
  padding: 4px;
  width: 240px;
  font-size: 16px;
  background: #fff;
  height: 30px;
  border: 1px solid #C2C2C2;
  .round;
}

#forgotPass {
  margin-top: 10px;
}

#forgotPass a {
  font-size: 11px;
  font-weight: normal;
  margin: 2px 0 0;
  color: #3190D3;
}

#forgotPass a:hover {
  text-decoration: none;
  color: #d85724;
}

#rememberPass {
  margin-top: 20px;
}

#rememberMe {
  display: inline;
  margin-top: -9px;
  margin-left: 5px;
  font-size: 11px;
  font-weight: normal;
  color: #5b636a;
  position: relative;
  top: -2px;
}

#btnSignIn {
  width: 250px;
  height: 36px;
  position: relative;
  top: 20px;
  border: none;
  font-weight: bold;
  .round;
}

#btnSignIn:hover {
  .hoverSign;
}

.activeHeader {
  background: #f6f6f6;
  color: black;
  border-radius: 0 5px 0px 0 !important;
}

#profilePanel {
  width: 285px;
  height: 125px;
  .panel;
}

.profileContent {
  padding: 10px;
}

#profilePicture {
  width: 105px;
  height: 105px;
  background: url("../img/avatar.png");
  display: inline-table;
  float: left;
}

#profileDetail {
  display: inline-table;
  margin-left: 10px;
}

.profileRow {
  .label;
  margin-top: 0px;
}

.profileRow:hover {
  cursor: pointer;  
  text-shadow: 1px 1px #000033;
}


